<template>
  <el-col :span="24" class="mb-16" :style="styles">
    <div
      class="pr-10 fl"
      :class="{ 'text-required': required, 'text-right': labelPosition == 'right', 'text-left': labelPosition == 'left' }"
      :style="{
        width: label ? labelWidth : '0px',
        fontWeight: 'normal',
        lineHeight: '40px'
      }"
    >
      <span v-html="label"></span><span v-if="label">{{ labelSuffix }}</span>
    </div>
    <div>
    <!-- <div
      class="mt--10 fl"
      :style="{
        width: `calc(100% - ${label ? labelWidth : '0px'} - ${isRowLastEl ? '6px' : '25px'})`,
      }"
    > -->
      <el-form-item class="mb-0" :prop="prop">
        <slot></slot>
        <slot name="notice"></slot>
      </el-form-item>
    </div>
  </el-col>
</template>

<script>
export default {
  name: 'MFormItem',
  props: {
    required: {
      type: Boolean,
      default: false,
    },
    span: {
      type: Number,
      default: 24,
    },
    label: {
      type: String,
      default: '',
    },
    labelWidth: {
      type: String,
      default: '100px',
    },
    labelPosition: {
      type: String,
      default: 'left',
    },
    labelSuffix: {
      type: String,
      default: '：',
    },
    prop: {
      type: String,
    },
    styles: {
      type: Object,
    },
    isRowLastEl: {
      type: Boolean,
      default: false,
    },
  },
}
</script>


